<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id='root'>
	<p>{{VueMsg}}</p>
	<parent-component></parent-component>
	<template id="parent-component">
		<child-component1></child-component1>
		<child-component2></child-component2>
		<button @click='showChildComponentData'>showChildComponentData</button>
	</template>
	<template id="child-component1">
		<h1>这是child-component1子元素</h1>
	</template>
	<template id="child-component2">
		<h1>这是child-component2子元素</h1>
	</template>
</div>	
<script>
	Vue.component('parent-component',{
		template : '#parent-component',
		components : {
			'child-component1' : {
				template : '#child-component1',
				data : function(){
					return {
						msg : '这是child-component1子元素',
					};
				},
			},
			'child-component2' : {
				template : '#child-component2',
				data : function(){
					return {
						msg : '这是child-component2子元素',
					};
				},
			},
		},
		methods : {
			showChildComponentData : function(){
				console.log(this.$children)
				for(var i=0;i<this.$children.length;i++){
					console.log(this.$children[i].msg);
				}
			}
		}
	});
	var vm = new Vue({
		el : '#root',
		data : {
			VueMsg : "Hello VueJs !",
		},
	})
</script>
</body>
</html>